<style lang="scss" scoped>
    .mshop-sortbar {
        background-color: white;
        .main {
            border-bottom: 1px solid #eeeeee;

            height: 40px;
            display: flex;
            list-style-type: none;
            justify-content: space-around;
            align-items: center;

            .item {
                &.choosed {
                    color: red;
                }

                &.up:after {
                    margin-left: 4px;
                    display: inline-block;
                    content: '';
                    width: 0;
                    height: 0;
                    border-bottom: 8px solid red;
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                    margin-bottom: 1px;
                }

                &.down:after {
                    margin-left: 4px;
                    content: 'd';
                    display: inline-block;
                    content: '';
                    width: 0;
                    height: 0;
                    border-top: 8px solid red;
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                    margin-top: 1px;
                }
            }
        }
    }
</style>

<template>
    <div class="mshop-sortbar">
        <ul class="main">
            <li
                v-for="item in list"
                class="item"
                @click="do_click(item)"
                :class="{
                    'choosed': current === item,
                    'up': current === item && direction === 'up',
                    'down': current === item && direction === 'down'
                }" >{{ item }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            list: {
                type: Array,
                required: true,
            },
            action: {
                type: Function,
                required: true
            }
        },
        data: () => ({
            current: '',
            direction: 'up',
        }),
        methods: {
            do_click (item) {
                if (this.current === item) {
                    this.direction = this.direction === 'up'? 'down': 'up';
                } else {
                    this.direction = 'up';
                    this.current = item;
                }

                this.action.call(null, this.current, this.direction);
            }
        }
    }
</script>
